<template>
  <div class="share_receive">
    <p class="success_text">恭喜你成功领取</p>
    <strong class="share_number">
      {{$store.state.share.numberYbOld}}元助学{{$store.state.gsign === 'mhzg' ? '补贴' : '金'}}
    </strong>
    <div class="tab_number">
      {{$store.state.share.numberYbOld}}
    </div>
    <div class="tab_text">
      助学
    </div>
    <div class="ewm_img">
      <img v-if="$store.state.gsign === 'mhzg'" src="../../../assets/img/modules/share/ewm_mh.jpg" alt="">
      <img v-else src="../../../assets/img/modules/share/new.jpg" alt="">
      <p>长按识别二维码</p>
      <p>关注公众号发现适合你的提升学历吧!</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'share_receive',
  components: {},
  data () {
    return {}
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F64841')
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .share_receive {
    max-width: 750px;
    margin: 0 auto;
    background: url("../../../assets/img/modules/share/icon_3.png") no-repeat center;
    background-size: 100% 100%;
    width: 750px;
    height: 1210px;
    position: relative;
    .success_text{
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      font-size: 50px;
      text-align: center;
      color: #FDFAC7;
    }
    .share_number{
      position: absolute;
      top: 140px;
      left: 0;
      right: 0;
      font-size: 90px;
      letter-spacing: 5px;
      color: #ffffff;
      text-align: center;
    }
    .tab_number{
      position: absolute;
      top: 420px;
      left: 180px;
      right: 0;
      font-size: 150px;
      transform: rotate(-5deg);
      color: #DDC29D;
    }
    .tab_text{
      position: absolute;
      top: 430px;
      left: 510px;
      width: 50px;
      right: 0;
      font-size: 60px;
      transform: rotate(-5deg);
      color: #DDC29D;
    }
    .title_text{
      position: absolute;
      width: 550px;
      height: 240px;
      top: 550px;
      left: 50%;
      transform: translate(-50%, -50%);
      p{
        font-size: 34px;
        color: #FFFFFF;
        text-align: center;
        margin: 10px 0;
      }
    }
    .ewm_img{
      position: absolute;
      width: 340px;
      height: 340px;
      background-color: #ffffff;
      top: 850px;
      left: 50%;
      transform: translate(-50%, -50%);
      img{
        width: 340px;
        height: 340px;
      }
      p{
        font-size: 28px;
        color: #FFFFFF;
        text-align: center;
        margin: 10px -80px 0 ;
      }
    }
  }
</style>
